<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/element-ui.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/vue.js"></script>
    <script src="../js/element-ui.js"></script>
    <script src="../js/common.js"></script>
</head>
<body>
<div id="app">
    <el-backtop :bottom="120"></el-backtop>
    <el-container>
        <el-header>
            <el-image fit="cover" src="../images/logo.png"></el-image>
            <div class="top-nav">
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">
                        <span>测试链接</span>
                    </el-link>
                </div>
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">测试链接</el-link>
                </div>
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">测试链接</el-link>
                </div>
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">测试链接</el-link>
                </div>
                <div class="top-nav-group">
                    <el-link class="top-nav-item" :underline="false">测试链接</el-link>
                </div>
            </div>
        </el-header>
        <el-main>
            <nav class="main-nav">
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-link :underline="false" v-show="search" class="main-nav-item">
                        <span>测试链接</span>
                    </el-link>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <transition name="el-zoom-in-bottom" mode="out-in">
                    <el-dropdown v-show="search" trigger="click">
                    <span class="el-dropdown-link main-nav-item">
                        测试链接<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                            <el-dropdown-item>测试链接</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </transition>
                <div class="search-group">
                    <div class="el-icon-search" @click="searchExpand" v-show="search"></div>
                </div>
                <transition name="el-zoom-in-top">
                    <el-input size="mini" class="search-input" placeholder="请输入内容" v-show="!search">
                        <i slot="suffix" class="el-input__icon el-icon-close" @click="searchExpand"></i>
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </transition>
            </nav>
            <div class="content">
                <div class="index-content-first">
                    <el-carousel class="index-content-first-left">
                        <el-carousel-item key="1">
                            <el-image class="index-content-first-img" fit="cover" src="../images/first1.jpg"></el-image>
                        </el-carousel-item>
                        <el-carousel-item key="2">
                            <el-image class="index-content-first-img" fit="cover" src="../images/first2.jpg"></el-image>
                        </el-carousel-item>
                        <el-carousel-item key="3">
                            <el-image class="index-content-first-img" fit="cover" src="../images/first3.jpg"></el-image>
                        </el-carousel-item>
                        <el-carousel-item key="4">
                            <el-image class="index-content-first-img" fit="cover" src="../images/first4.jpg"></el-image>
                        </el-carousel-item>
                        <el-carousel-item key="5">
                            <el-image class="index-content-first-img" fit="cover" src="../images/first5.png"></el-image>
                        </el-carousel-item>
                        <el-carousel-item key="6">
                            <el-image class="index-content-first-img" fit="cover" src="../images/first6.jpg"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                    <div class="index-content-first-right">
                        <div class="more-group" v-show="tab75">更多</div>
                        <div class="more-group" v-show="tab76">更多</div>
                        <el-tabs v-model="activeName" @tab-click="handleClick">
                            <el-tab-pane label="通知公告" name="first">
                                <div class="notice" v-for="item in 8">
                                    <div class="notice-name">
                                        <i class="el-icon-caret-right"></i>
                                        <a href="#">文字长度测试文字长度测试文字长度测试文字长度测试</a>
                                    </div>
                                    <div class="notice-time">2021/03/05</div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="文件下载" name="second">
                                <div class="notice" v-for="item in 8">
                                    <div class="notice-name">
                                        <i class="el-icon-caret-right"></i>
                                        <a href="#">文字长度测试文字长度测试文字长度测试文字长度测试</a>
                                    </div>
                                    <div class="notice-time">2021/03/05</div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <div class="index-content-second">
                    <el-carousel height="200px">
                        <el-carousel-item key="1">
                            <div class="img-group">
                                <img class="index-content-second-img" src="../images/second1.jpg"/>
                                <img class="index-content-second-img" src="../images/second2.jpg"/>
                                <img class="index-content-second-img" src="../images/second3.jpg"/>
                            </div>
                        </el-carousel-item>
                        <el-carousel-item key="2">
                            <div class="img-group">
                                <img class="index-content-second-img" src="../images/second4.jpg"/>
                                <img class="index-content-second-img" src="../images/second5.jpg"/>
                                <img class="index-content-second-img" src="../images/second6.jpg"/>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
                <div class="index-content-third">
                    <div class="index-content-third-tab-group">
                        <div class="more-group-third" v-show="tab84">更多</div>
                        <div class="more-group-third" v-show="tab85">更多</div>
                        <div class="more-group-third" v-show="tab86">更多</div>
                        <el-tabs v-model="activeName2" @tab-click="handleClick2">
                            <el-tab-pane label="团情速递" name="third">
                                <div class="notice" v-for="item in 8">
                                    <div class="notice-name">
                                        <i class="el-icon-caret-right"></i>
                                        <a href="#">文字长度测试文字长度测试文字长度测试文字长度测试</a>
                                    </div>
                                    <div class="notice-time">2021/03/05</div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="基层之声" name="fourth">
                                <div class="notice" v-for="item in 8">
                                    <div class="notice-name">
                                        <i class="el-icon-caret-right"></i>
                                        <a href="#">文字长度测试文字长度测试文字长度测试文字长度测试</a>
                                    </div>
                                    <div class="notice-time">2021/03/05</div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="支部风采" name="fifth">
                                <div class="notice" v-for="item in 8">
                                    <div class="notice-name">
                                        <i class="el-icon-caret-right"></i>
                                        <a href="#">文字长度测试文字长度测试文字长度测试文字长度测试</a>
                                    </div>
                                    <div class="notice-time">2021/03/05</div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <el-divider direction="vertical"></el-divider>
                    <div class="index-content-third-tab-group">
                        <div class="more-group-third" v-show="tab90">更多</div>
                        <div class="more-group-third" v-show="tab91">更多</div>
                        <div class="more-group-third" v-show="tab92">更多</div>
                        <el-tabs v-model="activeName3" @tab-click="handleClick3">
                            <el-tab-pane label="实践志愿" name="sixth">
                                <div class="notice" v-for="item in 8">
                                    <div class="notice-name">
                                        <i class="el-icon-caret-right"></i>
                                        <a href="#">文字长度测试文字长度测试文字长度测试文字长度测试</a>
                                    </div>
                                    <div class="notice-time">2021/03/05</div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="创新创业" name="seventeen">
                                <div class="notice" v-for="item in 8">
                                    <div class="notice-name">
                                        <i class="el-icon-caret-right"></i>
                                        <a href="#">文字长度测试文字长度测试文字长度测试文字长度测试</a>
                                    </div>
                                    <div class="notice-time">2021/03/05</div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="青春榜样" name="eighteen">
                                <div class="notice" v-for="item in 8">
                                    <div class="notice-name">
                                        <i class="el-icon-caret-right"></i>
                                        <a href="#">文字长度测试文字长度测试文字长度测试文字长度测试</a>
                                    </div>
                                    <div class="notice-time">2021/03/05</div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <el-divider direction="vertical"></el-divider>
                    <div class="index-content-third-tab-group">
                        <div class="more-group-third" v-show="tab96">更多</div>
                        <div class="more-group-third" v-show="tab97">更多</div>
                        <div class="more-group-third" v-show="tab98">更多</div>
                        <el-tabs v-model="activeName4" @tab-click="handleClick4">
                            <el-tab-pane label="校学生会" name="nineteen">
                                <div class="notice" v-for="item in 8">
                                    <div class="notice-name">
                                        <i class="el-icon-caret-right"></i>
                                        <a href="#">文字长度测试文字长度测试文字长度测试文字长度测试</a>
                                    </div>
                                    <div class="notice-time">2021/03/05</div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="大学生艺术团" name="tenth">
                                <div class="notice" v-for="item in 8">
                                    <div class="notice-name">
                                        <i class="el-icon-caret-right"></i>
                                        <a href="#">文字长度测试文字长度测试文字长度测试文字长度测试</a>
                                    </div>
                                    <div class="notice-time">2021/03/05</div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="学生社团" name="eleven">
                                <div class="notice" v-for="item in 8">
                                    <div class="notice-name">
                                        <i class="el-icon-caret-right"></i>
                                        <a href="#">文字长度测试文字长度测试文字长度测试文字长度测试</a>
                                    </div>
                                    <div class="notice-time">2021/03/05</div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <div class="index-content-fourth">
                    <el-carousel indicator-position="outside">
                        <el-carousel-item key="1">
                            <div class="img-group2">
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third1.jpg"/>
                                    <div class="index-content-third-img-text">民乐表演</div>
                                </div>
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third2.jpg"/>
                                    <div class="index-content-third-img-text">开展学生权益工作</div>
                                </div>
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third3.jpg"/>
                                    <div class="index-content-third-img-text">学生表彰颁奖典礼演出</div>
                                </div>
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third4.jpg"/>
                                    <div class="index-content-third-img-text">学习十九大精神</div>
                                </div>
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third5.jpg"/>
                                    <div class="index-content-third-img-text">高雅艺术进校园</div>
                                </div>
                            </div>
                        </el-carousel-item>
                        <el-carousel-item key="2">
                            <div class="img-group2">
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third6.jpg"/>
                                    <div class="index-content-third-img-text">阳光下的川农趣味运动会</div>
                                </div>
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third7.jpg"/>
                                    <div class="index-content-third-img-text">共青团工作会</div>
                                </div>
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third8.jpg"/>
                                    <div class="index-content-third-img-text">管乐团表演</div>
                                </div>
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third9.jpg"/>
                                    <div class="index-content-third-img-text">学生管乐团</div>
                                </div>
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third10.jpg"/>
                                    <div class="index-content-third-img-text">大艺节朗诵作品</div>
                                </div>
                            </div>
                        </el-carousel-item>
                        <el-carousel-item key="3">
                            <div class="img-group2">
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third11.jpg"/>
                                    <div class="index-content-third-img-text">学生交响乐团</div>
                                </div>
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third12.jpg"/>
                                    <div class="index-content-third-img-text">召开艺术团成员大会</div>
                                </div>
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third13.jpg"/>
                                    <div class="index-content-third-img-text">话剧《十二公民》</div>
                                </div>
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third14.jpg"/>
                                    <div class="index-content-third-img-text">川农“男神”合唱天团</div>
                                </div>
                                <div class="index-content-third-img-group">
                                    <img class="index-content-third-img" src="../images/third15.jpg"/>
                                    <div class="index-content-third-img-text">金桂飘香十佳歌手大赛</div>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </el-main>
        <el-footer>
            <div class="footer-text-group">
                <div class="footer-text">地址：四川省雅安市雨城区新康路46号第四行政办公楼</div>
                <div class="footer-text">联系方式：0835—2882230 邮箱：aumdxtw@sicau.edu.cn</div>
                <div class="footer-text">Copyright ©2017 四川农业大学团委 All Rights Reserved.</div>
            </div>
            <div class="footer-img-group">
                <img class="footer-img" src="../images/foot1.jpg">
                <img class="footer-img" src="../images/foot2.png">
                <img class="footer-img" src="../images/foot3.png">
                <img class="footer-img" src="../images/foot4.png">
            </div>
        </el-footer>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                show: true,
                isCollapse: true,
                search: true,
                activeName: 'first',
                activeName2: 'third',
                activeName3: 'sixth',
                activeName4: 'nineteen',
                tab75: true,
                tab76: false,
                tab84: true,
                tab85: false,
                tab86: false,
                tab90: true,
                tab91: false,
                tab92: false,
                tab96: true,
                tab97: false,
                tab98: false,
            }
        },
        methods: {
            searchExpand() {
                this.search = !this.search
            },
            handleClick(tab) {
                if (tab._uid == 75) {
                    this.tab75 = true
                    this.tab76 = false
                } else {
                    this.tab75 = false
                    this.tab76 = true
                }
            },
            handleClick2(tab) {
                if (tab._uid == 84) {
                    this.tab84 = true
                    this.tab85 = false
                    this.tab86 = false
                } else if(tab._uid == 85) {
                    this.tab84 = false
                    this.tab85 = true
                    this.tab86 = false
                }else{
                    this.tab84 = false
                    this.tab85 = false
                    this.tab86 = true
                }
            },
            handleClick3(tab) {
                if (tab._uid == 90) {
                    this.tab90 = true
                    this.tab91 = false
                    this.tab92 = false
                } else if(tab._uid == 91) {
                    this.tab90 = false
                    this.tab91 = true
                    this.tab92 = false
                }else{
                    this.tab90 = false
                    this.tab91 = false
                    this.tab92 = true
                }
            },
            handleClick4(tab) {
                if (tab._uid == 96) {
                    this.tab96 = true
                    this.tab97 = false
                    this.tab98 = false
                } else if(tab._uid == 97) {
                    this.tab96 = false
                    this.tab97 = true
                    this.tab98 = false
                }else{
                    this.tab96 = false
                    this.tab97 = false
                    this.tab98 = true
                }
            }
        },
        mounted() {

        }
    })
</script>
</html>
